// 下拉菜单
let form = layui.form
axios.get('/my/article/cates').then((res)=>{
    console.log(res.data.data);
    let newArr = res.data.data.map((item)=>{
        return`
        <option value= "${item.Id}">${item.name}</option>
        `

    }).join('')
    $("[name=cate_id]").append(newArr)
    form.render('select'); //刷新select选择框渲染
})
// 1.3 创建裁剪区域
let $image = $('.container img')
const layer = layui.layer
let options={
    aspectRatio:400/280,
    preview:'.preview'
}
$image.cropper(options);

$('#btnChooseCoverImage').click(function(){

 $('#fileCover').click()
})
// 给文件域注册change事件
$('#fileCover').on('change',function () {
    let file=this.files[0]
    if (!file) {
        return layer.msg("请选择文件")
        
    }
    const newImgSrc = URL.createObjectURL(file)
    $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgSrc)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})
// 上传新头像

let state
$('#btnPublish').on('click',function () {
    state='已发布'
    
})
$('#btnSave').on('click',function () {
    state='草稿'
    
})
// 获取表单数据，ajax提交数据
$('#form').on('submit',function (e) {
    e.preventDefault()
    const fd = new FormData(this)
    fd.append('content',editor.text.html())
    fd.append('state',state)
    $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
    })
    .toBlob(function(blob) {       
    	// 将 Canvas 画布上的内容，转化为文件对象
     
     fd.append('cover_img',blob) 
       // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
    
    axios.post('/my/article/add',fd).then((res)=>{
        if (res.data.status!==0) {
            return layer.msg('发布失败')
        }
        layer.mg(
            '发布成功',{
                time:1500,
            },
            function () {
                location.href='/article/art_list.html'
                
            }
        )
    })
    })
    
    fd.forEach((value,name)=>console.log(value,name))
    
})